.img-container{
    height: 900px;
    width: 900px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin: 300px auto;
}
.img-item{
    box-shadow:inset 0 0 0 1px #fff;
    transition: 0.5s;
    background-size: 300px 300p;
    background-image: url(./111.jpg);
    position: relative;
}
.img-item:nth-child(3n+1){
    left: -20px;
    background-position-x: 0px;
}
.img-item:nth-child(3n+2){
    left: 0px;
    background-position-x: -100px;
}
.img-item:nth-child(3n){
    left: 20px;
    background-position-x: -200px;
}
.img-item{
    top: 20px;
    background-position-y: -200px;
}
.img-item:nth-child(-n+6){
    top: 0px;
    background-position-y: -100px;
}
.img-item:nth-child(-n+3){
    top: -20px;
    background-position-y: 0;
}
.img-container:hover .img-item{
    left: 0;
    top: 0;
    box-shadow:inset 0 0 0 0px #fff;
}